<template>
    <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
    <van-nav-bar
      left-text="个人资料"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell title="头像" :center="true">
      <van-image
        class="avatar"
        fit="cover"
        round
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
    </van-cell>
    <van-cell title="姓名" />
    <van-cell title="性别" />
    <van-cell title="手机号码" />
    <van-cell title="服务区域" />
    <van-cell title="详细地址" />
    <van-cell title="手机验证码">
      <template v-solt:default>
        <van-button type="default" size="mini" color="#3f51b5"
          >获取验证码</van-button>
      </template>
    </van-cell>
    <div class="footer">
      <van-button block color="#3f51b5"> 保存 </van-button>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      require: true,
    },
  },
  methods: {
    onClickLeft () {
      this.$emit('update:show', false)
    },
  },
}
</script>

<style>
.van-nav-bar__content {
  height: 100px;
  background-color: #3f51b5 !important;
}
.van-nav-bar__text,
.van-nav-bar__arrow {
  font-weight: 700;
  color: #fff !important;
}
.avatar {
  width: 90px;
  height: 90px;
}
.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}
</style>
